<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>文章管理</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
</head>
<!-- 作者：刘婷婷 -->

<body class="layui-layout-body">

    <div>
        <table id="demo" lay-filter="test"></table>
    </div>


    <script src="../../layui/layui.js"></script>
    <script src="../../js/jquery-1.12.4.min.js"></script>
    <script src="../../js/lodash.min.js"></script>
    <script>
        layui.use('table', async function () {
            const table = layui.table;
            //第一个实例
            const tableObj = table.render({
                elem: '#demo',
                url: '/api/Article',//数据接口，模拟的接口
                page: true,
                autoSort: false, //禁用前端自动排序
                toolbar: '#toolbarDemo',
                parseData: function (res) {
                    let description;
                    for (let i = 0; i < res.data.length; i++) {
                        var d = new Date(res.data[i].publishDate);
                        var times = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
                        res.data[i].publishDate = times;
                        let str = res.data[i].description;
                        if (str) {
                            res.data[i].description = str.substring(0, 10)+"...";
                        }

                    }

                },
                cols: [
                    [{
                        field: 'title',
                        title: '文章标题',
                        width: "40%",

                    }, {
                        field: 'description',
                        title: '文章描述',
                        width: "40%",
                    }, {
                        field: 'publishDate',
                        title: '发布日期',
                        width: "10%",
                        sort: true
                    }, {
                        field: 'time',
                        title: '操作',
                        templet: '<div> <div class= "layui-btn-group"><button class="layui-btn layui-btn-sm" onclick="edit(`{{d._id}}`)"><i class="layui-icon">&#xe642;</i></button><button class="layui-btn layui-btn-sm layui-btn-danger" onclick="delArticle(`{{d._id}}`, this)"> <i class="layui-icon ">&#xe640;</i></button></div></div> '
                    },
                    ]
                ]
            });
            //监听排序事件 
            table.on('sort(demo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                tableObj.reload({
                    initSort: obj,//记录初始排序，如果不设的话，将无法标记表头的排序状态。
                    where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                        field: obj.field, //排序字段
                        order: obj.type //排序方式
                    }
                });
            });
            //头工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'addarticle':
                        location.href = "./addarticle.html"
                        break;
                    case 'btnSubmit':
                        let key = $("#txtKey").val();
                        console.log(key);
                        layui.table.reload("demo", {
                            where: {
                                key,
                            },
                            page: {
                                curr: 1
                            }
                        })
                        break;
                    case 'btnReset':
                        $("#txtKey").val("");
                        location.href = "index.html";
                        break;
                };
            });
        });
        function delArticle(id, btn) {

            layer.confirm('确定删除吗？', { icon: 3 }, function (index) {
                $.ajax({
                    url: "/api/Article/" + id,
                    method: "delete",
                });
                $(btn).parents("tr").remove();
                layer.close(index);
            });
        }
        //修改用户
        function edit(id) {
            location.href = "./addarticle.html?id=" + id;
        }

    </script>

    <script type="text/html" id="toolbarDemo">
        <button class="layui-btn layui-btn-sm" lay-event="addarticle">添加文章</button>
        <div class="layui-input-inline">
            <input type="text" id="txtKey" placeholder="请输入关键字" autocomplete="off" class="layui-input">
        </div>
        <button class="layui-btn layui-btn-sm" lay-event="btnSubmit">查询4uuuuu</button>
        <button class="layui-btn layui-btn-sm" lay-event="btnReset">重置</button>
        
    </script>

</body>

</html>